import React,{lazy,Suspense} from "react";//引入懒加载或按需加载的路由组件
import {BrowserRouter,NavLink,Route,Routes} from 'react-router-dom';
import { useState } from "react";
import { Button , Carousel } from "antd"; // 所有UI组件都在这个库中
import { SearchOutlined ,QuestionCircleOutlined } from "@ant-design/icons"; // 所有图标组件都在这个库中
const Home = lazy(()=>import("./props/Home/Home"));
const About = lazy(()=>import("./props/About/About"))
 
const style = {
  width: "100%",
  height: "200px",
  backgroundColor: "pink",
};


export default function App() {
  const [num, setNum] = useState(0);
  // const style = {
  //   width: "100%",
  //   height: "200px",
  //   backgroundColor: "pink",
  // };

  const handleClick = () => {
    console.log("按钮点击了~");
  };

  return (
    <div>
      <Button onClick={handleClick}>按钮111</Button>
      <Button type="primary">按钮222</Button>
      <Button type="link">按钮333</Button>

      <Button danger>按钮444</Button>
      <Button type="primary" danger>
        按钮555
      </Button>
      {/* 
        type 按钮类型
        shape 按钮形状
        icon 按钮渲染的图标
      */}
      <Button type="primary" shape="circle" icon={<SearchOutlined />} />

      <Button type="dashed" icon={<QuestionCircleOutlined />}>
      
      </Button>

      <Carousel autoplay>
        <div>
          <div style={style}>111</div>
        </div>
        <div>
          <div style={style}>222</div>
        </div>
        <div>
          <div style={style}>333</div>
        </div>
        <div>
          <div style={style}>444</div>
        </div>
      </Carousel>

      <BrowserRouter>
        <ul>
          <li><NavLink to='/home'>Home</NavLink></li>
        <li><NavLink to='/about'>About</NavLink></li>
        </ul>

        <Routes>

          <Route path="/home" element={
          <Suspense fallback={<div>loading...</div>}><Home/></Suspense>
          }></Route>

          <Route path="/about" element={
           <Suspense fallback={<div>loading...</div>}><About/></Suspense>
          }></Route>

        </Routes>
      </BrowserRouter>
    </div>
  );
}